﻿@{
    ViewBag.Title = "商品详情";
    Layout = null;
}

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, minimum-scale= 1.0, initial-scale= 1.0">
    <link href="~/Content/Style/conmon.css" rel="stylesheet" type="text/css">
    <link href="~/Content/fonts/iconfont.css" rel="stylesheet" type="text/css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet">
    <!-- Include the Swiper library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- Swiper JS Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue-awesome-swiper@3.1.2/dist/vue-awesome-swiper.js"></script>

    @*jqueryAlert提示框*@
    <link href="~/Content/alert/css/alert.css" rel="stylesheet" />
    <script src="~/Content/alert/js/alert.js"></script>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

    <style>
        .summary {
            padding-bottom: 70px;
        }

            .summary .top {
                display: flex;
            }

                .summary .top .top_item {
                    flex: 1;
                    text-align: center;
                    height: 40px;
                    line-height: 40px;
                    background-color: #fff;
                    color: #000;
                }

                    .summary .top .top_item.current {
                        color: #FFC256;
                    }

        .rating-wrapper {
            padding: 0 18px;
        }

            .rating-wrapper .rating-item {
                display: flex;
                padding: 18px 0;
                border-bottom: 1px solid rgba(7, 17, 27, 0.1);
            }

                .rating-wrapper .rating-item .avatar {
                    flex: 0 0 28px;
                    width: 28px;
                    margin-right: 12px;
                }

                    .rating-wrapper .rating-item .avatar img {
                        border-radius: 50%;
                    }

                .rating-wrapper .rating-item .content_sum {
                    position: relative;
                    flex: 1;
                }

                    .rating-wrapper .rating-item .content_sum .name {
                        margin-bottom: 4px;
                        line-height: 12px;
                        font-size: 10px;
                        color: rgb(7, 17, 27);
                    }

                    .rating-wrapper .rating-item .content_sum .star-wrapper {
                        margin-bottom: 6px;
                        font-size: 0;
                    }

                        .rating-wrapper .rating-item .content_sum .star-wrapper .star {
                            display: inline-block;
                            margin-right: 6px;
                            vertical-align: top;
                        }

                        .rating-wrapper .rating-item .content_sum .star-wrapper .delivery {
                            display: inline-block;
                            vertical-align: top;
                            line-height: 12px;
                            font-size: 10px;
                            color: rgb(147, 153, 159);
                        }

                    .rating-wrapper .rating-item .content_sum .text {
                        margin-bottom: 8px;
                        line-height: 18px;
                        color: rgb(7, 17, 27);
                        font-size: 12px;
                    }

                    .rating-wrapper .rating-item .content_sum .recommend {
                        line-height: 16px;
                        font-size: 0;
                    }

                        .rating-wrapper .rating-item .content_sum .recommend .icon-thumb_up,
                        .rating-wrapper .rating-item .content_sum .recommend .item {
                            display: inline-block;
                            margin: 0 8px 4px 0;
                            font-size: 9px;
                        }

                        .rating-wrapper .rating-item .content_sum .recommend .icon-thumb_up {
                            color: rgb(0, 160, 220);
                        }

                        .rating-wrapper .rating-item .content_sum .recommend .item {
                            padding: 0 6px;
                            border: 1px solid rgba(7, 17, 27, 0.1);
                            border-radius: 1px;
                            color: rgb(147, 153, 159);
                            background: #fff
                        }

                    .rating-wrapper .rating-item .content_sum .time {
                        position: absolute;
                        top: 0;
                        right: 0;
                        line-height: 12px;
                        font-size: 10px;
                        color: rgb(147, 153, 159);
                    }

        .item_liBox {
            display: flex;
            flex-wrap: wrap;
        }

            .item_liBox .item_li {
                width: 25%;
                text-align: center;
            }

        .image-header {
            position: relative;
            width: 100%;
            height: 0;
            padding-top: 100%;
        }

            .image-header img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

            .image-header .back {
                position: absolute;
                top: 10px;
                left: 0;
            }

                .image-header .back .icon-arrow_lift {
                    display: block;
                    padding: 10px;
                    font-size: 20px;
                    color: #fff;
                }

        .content {
            position: relative;
            padding: 18px;
        }

            .content .title {
                line-height: 14px;
                margin-bottom: 8px;
                font-size: 14px;
                font-weight: 700;
                color: rgb(7, 17, 27);
            }

            .content .detail {
                margin-bottom: 18px;
                line-height: 10px;
                height: 10px;
                font-size: 0;
            }

                .content .detail .sell-count,
                .content .detail .rating {
                    font-size: 10px;
                    color: rgb(147, 153, 159);
                }

                .content .detail .sell-count {
                    margin-right: 12px;
                }

            .content .price {
                font-weight: 700;
                line-height: 24px;
            }

                .content .price .now {
                    margin-right: 8px;
                    font-size: 14px;
                    color: rgb(240, 20, 20);
                }

                .content .price .old {
                    text-decoration: line-through;
                    font-size: 10px;
                    color: rgb(147, 153, 159);
                }

            .content .cartcontrol-wrapper {
                position: absolute;
                right: 12px;
                bottom: 12px;
            }

            .content .buy {
                position: absolute;
                right: 18px;
                bottom: 18px;
                z-index: 10;
                height: 24px;
                line-height: 24px;
                padding: 0 12px;
                box-sizing: border-box;
                border-radius: 12px;
                font-size: 10px;
                color: #fff;
                background: rgb(0, 160, 220);
                opacity: 1;
            }

                .content .buy.fade-enter-active,
                .content .buy.fade-leave-active {
                    transition: all 0.2s;
                }

                .content .buy.fade-enter,
                .content .buy.fade-leave-active {
                    opacity: 0;
                    z-index: -1;
                }

        .split {
            width: 100%;
            height: 16px;
            border-top: 1px solid rgba(7,17,27,0.1);
            border-bottom: 1px solid rgba(7,17,27,0.1);
            background: #f3f5f7;
        }

        .content_lb img,
        .content_cs img {
            width: 100% !important;
        }
        
        footer .footer_box {
            height: 100%;
        }

            footer .footer_box .footer_li.flex {
                flex: 0 0 60%;
                background-color: #FF6700;
            }

                footer .footer_box .footer_li.flex .orderText {
                    color: #fff;
                    line-height: 56px;
                }
    </style>
</head>

<body>
    <div id="app">
        <div class="summary">
            <local-swiper ref="awesomeSwiperB" :options="swiperOptionB">
                <local-slide v-for="(item,index) in Order_Carousel_T" :key="index" class="image-header">
                    <img :src="item.CarouselURL" v-on:click="aaa(item,index)">
                </local-slide>
            </local-swiper>
            @*<div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="image-header">
                                <img v-for="i in Order_FileInfo_T" :src="i.FileURL">
                            </div>
                        </div>
                    </div>
                </div>*@
            <div class="content">
                <h1 class="title" v-if="Summary[0]">{{Summary[0].DishesNmae}}</h1>
                <span style="font-size: 10px; color: rgb(147, 153, 159);" v-if="Summary[0]">{{Summary[0].DishesTxt}}</span>
                @*<div class="detail">
                        <span class="sell-count">月售229份</span>
                        <span class="rating">好评率100%</span>
                    </div>*@
                <div class="price">
                    <span class="now" v-if="Summary[0]">￥{{Summary[0].DishesPay}}</span><span class="old" v-if="Summary[0]">￥{{Summary[0].DishesMon}}</span>
                </div>
                @*<transition name="fade">
                        <div class="buy">
                            加入购物车
                        </div>
                    </transition>*@
            </div>
            <div class="split" style=""></div>
            <div class="top">
                <div class="top_item" v-for="(text,index) in items" :key="index" v-on:click="ruta(index)" :class="{'current':currentIndex===index}">{{text.name}}</div>
            </div>
            <div class="split" style=""></div>
            <div class="content_sum">
                <div v-if="dada===0 && Summary[0]" v-html="Summary[0].DishesSummary" class="content_lb"></div>
                <div v-if="dada===1 && Summary[0]" v-html="Summary[0].DishesParam" class="content_cs"></div>
                <div v-if="0">
                    @*dada===2*@
                    <div class="rating-wrapper">
                        <ul>
                            <li class="rating-item" v-for="item in number">
                                <div class="avatar">
                                    <img width="28" height="28" src="../../Content/images/testImages/145.jpg">
                                </div>
                                <div class="content_sum">
                                    <h1 class="name">3******c</h1>
                                    @*<div class="star-wrapper">
                                            <star :size="24" :score="rating.score"></star>
                                            <span class="delivery" v-show="rating.deliveryTime">{{rating.deliveryTime}}</span>
                                        </div>*@
                                    <p class="text">不错,粥很好喝,我经常吃这一家,非常赞,以后也会常来吃,强烈推荐.</p>
                                    @*<div class="recommend">
                                            <span class="icon-thumb_up"></span>
                                            <span class="item">南瓜粥</span>
                                            <span class="item">皮蛋瘦肉粥</span>
                                            <span class="item">扁豆焖面</span>
                                            <span class="item">娃娃菜炖豆腐</span>
                                            <span class="item">牛肉馅饼</span>
                                        </div>*@
                                    <div class="item_liBox">
                                        <div class="item_li" v-for="item in number">
                                            <div class="item-img">
                                                <img src="../../Content/images/testImages/12.jpg" alt="" height="60" width="60" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="time">2016-07-23 21:52</div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <footer>
            <div class="footer_box">
                <div class="footer_li">
                    <a href="/">
                        <div class="footer-img">
                            <i class="iconfont icon-union" style="font-size: 28px;"></i>
                        </div>
                        <span>首页</span>
                    </a>
                </div>
                <div class="footer_li">
                    <a href="/ShoppingCart/Index">
                        <div class="footer-img">
                            <i class="iconfont icon-gouwuche4" style="font-size: 28px;"></i>
                        </div>
                        <span>购物车</span>
                    </a>
                </div>
                <div class="footer_li flex">
                    <a href="#">
                        <div class="orderText" v-on:click="AddCar()">加入购物车</div>
                    </a>
                </div>
            </div>
        </footer>
    </div>

    <script src="~/Content/Script/jquery-1.8.3.min.js"></script>
    <!-- 引入 Vue -->
    <script src="https://unpkg.com/vue"></script>

    <script>
        Vue.config.productionTip = false;   //Vue去掉警告 You are running Vue in development mode
        var vm = new Vue({
            el: '#app',
            components: {
                LocalSwiper: VueAwesomeSwiper.swiper,
                LocalSlide: VueAwesomeSwiper.swiperSlide,
            },
            data() {
                return {
                    dada: 0,
                    Summary: '',
                    Order_Carousel_T: '',
                    currentIndex: 0,
                    number: [1, 2, 3, 4, 5, 6, 7, 8, 9],
                    items: [{
                        name: '详情',
                        active: true,
                    },
                    {
                        name: '参数',
                        active: false,
                    }
                        //    ,
                        //{
                        //    name: '评价',
                        //    active: false,
                        //    }
                    ],
                    swiperOptionB: {
                        pagination: {
                            el: '.swiper-pagination',
                            dynamicBullets: true
                        }
                    }

                };
            },
            created() {
                var _this = this;
                var GetRequest = new GetRequest();
                function GetRequest() {
                    var url = location.search; //获取url中"?"符后的字串
                    var theRequest = new Object();
                    if (url.indexOf("?") != -1) {
                        var str = url.substr(1);
                        strs = str.split("&");
                        for (var i = 0; i < strs.length; i++) {
                            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                        }
                    }
                    return theRequest;
                }
                $.ajax({
                    url: "/Classification/Get_Order_DishesByDishesID",
                    type: "POST",
                    dataType: "json",
                    data: { DishesID: GetRequest.id, YZM: '', RETID: 1 },
                    success: function (data) {
                        vm.Summary = data.rows;
                        vm.Order_Carousel_T = vm.Summary[0].Order_Carousel_T;
                        //console.log(vm.Summary);
                    }
                });
            },
            methods: {
                ruta: function (index) {
                    this.dada = index;
                    this.currentIndex = index;
                },
                aaa: function (aaa, bbb) {
                    console.log(aaa,bbb)
                },
                AddCar: function () {
                    var sut = vm.Summary;
                    $.ajax({
                        url: "/ShoppingCart/Order_ShoppingCar_Add",
                        type: "POST",
                        dataType: "json",
                        data: { OperID: 0, DisheID: sut[0].DishesID, YZM: '', RETID: 1 },
                        success: function (data) {
                            if (data.BS == 1) {
                                var dialog = jqueryAlert({
                                    'title': '操作提示',
                                    'content': '商品添加购物车成功，是否前往购物车？',
                                    'modal': true,
                                    'buttons': {
                                        '取消': function () {
                                            dialog.close();
                                        },
                                        '确定': function () {
                                            dialog.close();
                                            window.location.href = '/ShoppingCart/Index';
                                        }
                                    }
                                })
                            }
                            else {
                                jqueryAlert({
                                    'content': '加入购物车失败!'
                                });
                            }
                        }
                    });
                }
            }
        });
    </script>
</body>
</html>
